<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css"> 
.layer1{width:100%;height:100px;border:double;}
.layer1-1{width:100%;height:70px;background:#09F;text-align:center;font:2em KaiTi;}
.layer1-2{width:100%;height:30px;background:#03F;}
.layer1-2 ul{list-style-type:none;margin:0;padding-left:20%;overflow:hidden;}
.layer1-2 li{float:left;width:14%;}
.layer1-2 li a{display:block;color:#FFF;font:1.2em KaiTi;text-align:center;line-height:30px;text-decoration:none;}
.layer1-2 li a:hover{background:#3F0;}
.layer2{width:100%;height:300px;border:double;}
.layer2-1{width:25%;height:300px;background:#0FF;float:left;}
.layer2-1 a{display:block;color:#FFF;font:1.5em KaiTi;text-align:center;line-height:30px;text-decoration:none;border-left:10px #0033FF solid;}
.layer2-1 a:hover{background:#3F0;}
.layer2-2{width:40%;height:300px;background:#3F9;float:left;}
.layer2-3{width:30%;height:300px;background:#0FF;float:left;}
.layer2-4{clear:both;}
.layer3{width:100%;height:30px;background:#06F;border:double;text-align:center;line-height:30px;}
hr{ width:80%;color:#FFF}
</style>
</head>

<body>
<div class=layer1>
   <div class=layer1-1>商苑论坛</div>
   <div class=layer1-2>
      <ul>
         <li><a href="#">学习</a></li>
         <li><a href="#">体育</a></li>
         <li><a href="#">娱乐</a></li>
         <li><a href="#">青春</a></li>
         <li><a href="#">创业</a></li>
      </ul>
   </div>
</div>
<div class=layer2>
   <div class=layer2-1>
      <h3>学校板块</h3>
      <hr align="left">
      <a href="#">工商管理学院</a>
      <a href="#">会计金融学院</a>
      <a href="#">信息艺术学院</a>
      <a href="#">智能服务学院</a>
      <a href="#">公共管理学院</a>
      <a href="#">食品药品学院</a>
      </ul>
   </div>
   <div class=layer2-2>
      <h3>帖子内容</h3>
      <hr align="left">
     
   </div>
   <div class=layer2-3>
      <h3>热帖排行</h3>
      <hr align="left">
      
   </div>
   <div class=layer2-4></div>
</div>
<div class=layer3>学校地址：济南市旅游路4516号 邮编：250103</div>
</body>
</html>
